<template>
	<view class="user">
    <view class="user-section">
      <image class="bg" src="@/static/user_bg.png"></image>
      <!--用户信息-->
      <view class="user-info-box">
        <view
            class="portrait-box"
            @click="toLogin"
        >
          <image
              class="portrait"
              :src="userInfo.image || headImg"
          ></image>
          <text class="username" v-if="userInfo.id">
            {{
              userInfo.nickname || '暂无昵称'
            }}
          </text>
          <text class="username" v-else>登录/注册</text>
        </view>
      </view>
    </view>
    <div class="user-container">
      <image class="arc" src="@/static/arc.png"></image>
      <div class="promotion-center">
        <!-- 浏览历史 -->
        <view class="history-section icon">
          <list-cell icon="chat-fill" iconColor="#5fcda2" title="Customer service" @eventClick="navTo('/pages/address/address')"></list-cell>
          <list-cell icon="share-fill" iconColor="#e07472" title="Recommendation" border="" @eventClick="navTo"></list-cell>
          <list-cell icon="star-fill" iconColor="#e07472" title="Feedback" border=""></list-cell>
          <list-cell icon="skip-back-left" iconColor="#e07472" title="退出登录" border="" @eventClick="logout"></list-cell>
        </view>
      </div>
    </div>
	</view>
</template>

<script>
import listCell from '@/components/mix-list-cell';
import headImg from '@/static/missing-face.png'
	export default {
    components: {
      listCell
    },
		data() {
			return {
        headImg,
        userInfo: {}
			}
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo');
    },
		methods: {
      toLogin() {
        if (!this.userInfo.id) {
          this.$u.route({
            type: 'navigateTo',
            url: '/pages/user/login'
          })
        }
      },
      navTo(url) {
        return;
        if (!uni.getStorageSync('userInfo').id) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        this.$u.route({
          type: 'navigateTo',
          url
        })
      },
      logout() {
        uni.removeStorageSync('userInfo');
        this.userInfo = {};
      }
		}
	}
</script>

<style lang="scss">
.user {
  height: 100%;
  overflow: auto;
  background-color: $page-color-base;
  .user-container {
    margin-top: -150upx;
    padding: 0 30upx 20upx;
    position: relative;
    background-color: $page-color-base;
    .arc {
      position: absolute;
      left: 0;
      top: -34upx;
      width: 100%;
      height: 36upx;
    }
    .promotion-center {
      background: #fff;
      margin: 20upx 0;
      .order-selection {
        display: flex;
        justify-content: space-around;
        align-content: center;
        background: #fff;
        border-radius: 10rpx;
        padding: 28rpx 0;
        margin-top: 20rpx;

        .order-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 120upx;
          height: 120upx;
          border-radius: 10upx;
          font-size: $font-sm;
          color: $font-color-dark;
        }
        .yticon{
          font-size: 48upx;
          margin-bottom: 18upx;
          color: #fa436a;
        }
        .icon-shouhoutuikuan{
          font-size:44upx;
        }
      }
      .history-section{
        margin-top: 20upx;
        background: #fff;
        border-radius:10upx;
        .sec-header{
          display:flex;
          align-items: center;
          font-size: $font-base;
          color: $font-color-dark;
          line-height: 40upx;
          margin-left: 30upx;
          .yticon{
            font-size: 44upx;
            color: #5eba8f;
            margin-right: 16upx;
            line-height: 40upx;
          }
        }
        .h-list{
          white-space: nowrap;
          padding: 30upx 30upx 0;
          image{
            display:inline-block;
            width: 160upx;
            height: 160upx;
            margin-right: 20upx;
            border-radius: 10upx;
          }
        }
      }
    }
  }
  .user-section {
    background-color: $page-color-base;
    height: 520upx;
    padding: 100upx 30upx 0;
    position: relative;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: blur(1px);
      opacity: .7;
    }

    .user-info-box {
      height: 180upx;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
      justify-content: space-between;

      .portrait-box {
        display: flex;
        align-items: center;

        .portrait {
          width: 130upx;
          height: 130upx;
          border: 5upx solid #fff;
          border-radius: 50%;
        }

        .username {
          font-size: $font-lg + 6upx;
          color: #FFFFFF;
          margin-left: 20upx;
        }

        button {
          background-color: transparent;
          font-size: $font-lg + 6upx;
          color: $font-color-dark;
          border: none;
        }

        button::after {
          border: none;
        }
      }
    }

  }
}
</style>
